<script setup>
import { ref, watch,reactive } from 'vue';
import request from "../axios/axios.js"
/***
 * 页面相关的参数
 * 
 */

 let pageShow=ref(1)
 let pageSize=ref(5)
 let totalPage=ref(5)

 let pageList=reactive({
    pagel:[]
 })
 //充值记录的查询
let adminWeList=[]
//充值记录id
let inputDepositId=ref("");
//用户id
let inputUserId=ref("")
//宿舍id
let inputDormitoryId=ref("")
//定义查询
let queryFunciton=ref(1);
//定义查询1 queryByDepoditId'

//定义查询2 queryByUerId

//定义查询3 queryByDormitoryId
//定义查询方法
function qDepositdId(){
    //充值记录
    queryFunciton.value=1;
    queryDepositInfoById();
}
function qUserId(){
    //用户id
    queryFunciton.value=2;
    queryDepositInfoByUserId();
}
function qDormitoryId(){
    //寝室id
    queryFunciton.value=3;
    queryDepositInfoByDormitoryId();

}

 //watch监视
 watch(pageShow,()=>{
    console.log(pageShow.value)

    if(queryFunciton.value==1){
        queryDepositInfoById();
    }else 
    if(queryFunciton.value==2){
        queryDepositInfoByUserId()
    }else 
    if(queryFunciton.value==3){
        
        queryDepositInfoByDormitoryId()
    }
    //调用查询
 })
 //监听数据变化
 watch(adminWeList,()=>{
    console.log(adminWeList)
 })
 watch(()=>pageList.pagel,(value)=>{
    console.log(value)
 })












//通过充值记录id查询
async function queryDepositInfoById(){
    let {data} = await request.get("/queryDepositInfoById",{
        params:{
            depositId:inputDepositId.value,
            page:1,
            pageSize:5
        }
    })
    console.log(data)
    adminWeList=data.pageList;
    console.log(adminWeList)
    if(data.statusCode==200){

        //把数据放入到列表中
        pageList.pagel=adminWeList

        alert(data.message);

    }else{
        alert(data.message);
    }
}
//通过用户id查询
async function queryDepositInfoByUserId(){
    let {data} = await request.get("/queryDepositInfoByUserId",{
        params:{
            userId:inputUserId.value,
            page:pageShow.value,
            pageSize:5
            
        }
    })
    if(data.statusCode==200){
        //获取数据

        //页数的设置
        pageList.pagel = data.pageList;
        //数据列表的绑定
        totalPage.value=data.pageTotal;
        alert(data.message);
    }else{
        alert(data.message);
    }
}

//通过寝室ｉｄ查询
async function queryDepositInfoByDormitoryId(){
    let {data} = await request.get("/queryDepositInfoByDormitoryId",{
        params:{
            dormitoryId:inputDormitoryId.value,
            page:pageShow.value,
            pageSize:5  
            
        }
    })
    
    console.log(data)
    if(data.statusCode==200){
        
        pageList.pagel=data.pageList;
        //设置页面数据
        //处理total数据
        totalPage.value=data.pageTotal;
        console.log(totalPage.value )
        alert(data.message);
    }else{
        alert(data.message);
    }
}

//页面的书写
function addPage(){
    if(pageShow.value< totalPage.value){
        pageShow.value++;
    }
}
function subPage(){
    if(pageShow.value<totalPage.value && pageShow.value>0){
        pageShow.value--
    }
}

</script>

<template>
    管理员水电费充值记录界面
    查询

    
    <div class="Dormitory">


    <div style="width: 100%; height: 80%;">
        <!-- 查询功能 -->
        <table style="width: 100%; height: 30%;">
        <tr class="trb">
                <td class="name">充值记录id查询</td ><td class="content"  > <input type="text"   v-model="inputDepositId" /></td>
                <td>
                    
                    <button @click="qDepositdId()">查询</button>
                
                </td>
            </tr>
            
            <tr class="trb">
                <td class="name">用户名id查询</td ><td class="content"  > <input type="text"  v-model="inputUserId" /></td>
                <td>
                    
                    <button @click="qUserId()">查询</button>
                    
                </td>
            </tr>
            <tr class="trb">
                <td class="name">寝室id查询</td ><td class="content"  > <input type="text"  v-model="inputDormitoryId" /></td>
                <td>
                
                    <button @click="qDormitoryId()">查询</button>
                    
                </td>
            </tr>    
        </table>
        <!-- 渲染 -->

        <table style="width: 100%; height: 70%;" >
            <tr class="trb">
                <td>充值记录id</td>
                <td>用户id</td>
                <td>宿舍id</td>
                <td>充值金额</td>
                <td>充值时间</td>
            </tr>

            <!-- 
                v-for渲染
             -->
            <tr v-for="(item,index) in pageList.pagel " key="index" class="trb">
                <td>
                    {{ item.depositId }}
                </td>
                <td>
                    {{ item.userId }}
                </td>
                <td>
                    {{ item.dormitoryId }}
                </td>
                <td>
                    {{ item.depositMonkey }}
                </td>
                <td>
                    {{ new Date(item.depositTime) }}
                </td>
            </tr>
            <tr class="trb">
                <td></td>
                <td><button @click="subPage()" >&lt</button></td>
                <td><span v-text="pageShow"></span></td>
                <td><button  @click="addPage()">&gt</button></td>
                <td></td>

            </tr>
        </table>
    </div>
    </div>
</template>

<style scoped>
.name{   
      width: 20%;
   }
   .trb{
      background-color: beige;
      height: 10%;
   }
   .tb_content{
      width: 100%;
      height: 100%;
      background-color: rgb(238, 245, 205);
      /* background-image: url(../public/img/bg02.jpg);
      background-size: 100%; */
   }
   .trb:hover{
      background-color: chartreuse;
   }
   .trb:active{
      background-color:rgb(230, 26, 26);
   }
   /*
        用户查询
   */
   .Despoit{
    width: 100%;
    height: 80%;
    background-color: chocolate;
   }


   /* 
    寝室信息展示
   */
   .Dormitory{
    width: 100%;
    height: 20%;

   }
   .showQuery{
    width: 100%;
    height: 100%;

   }
   .DormitoryName{
    width: 100%;
    height: 20%;

   }

</style>
